import React, { Component } from 'react'
import { Row, Col, Icon, Button, message } from 'antd';
import 'antd/dist/antd.css'
import { Link } from 'react-router-dom'
import Header from '../../common/header'
import Footer from '../../common/footer'
import { alltopListData, getSongUrlData, getSongData } from '../../api';
import { formatMonthDate } from '../../api/formatData';
import SongList from './songList'
import MusicPlay from '../../common/MusicPlay';
import docCookies from '../../api/docCookies';
import './index.scss';


class DiscoverToplist extends Component {

    constructor(props) {
        super(props);
        this.state = {
            updateFrequency: "每天更新",
            limit: 20,
            offset: 1,
            total: 0,
            updatedTime: "",
            type: 1,
            songs: [
                {
                    songId: 0,
                    songName: "歌曲名",
                    playCount: 0,
                    singer: [
                        {
                            singerId: 0,
                            singerName: "歌手名"
                        }
                    ]
                }
            ],
        }
    }


    componentDidMount() {

        // 获取type id
        const searchStr = this.props.location.search.match(/\d+/gi).toString();
        this.searchStr = searchStr;

        // 获取榜单数据 type=1
        alltopListData(parseInt(this.searchStr), this.state.limit, this.state.offset).then((res) => {
            try {
                if (res.data.code === 200) {
                    this.setState({
                        songs: res.data.songs,
                        total: res.data.total,
                        updatedTime: res.data.updatedTime,
                        type: parseInt(this.searchStr)
                    })
                }
            } catch (err) {
                console.log("错误为:" + err)
            }
        }).catch((error) => {
            console.log("错误为:", error);
        });

    }


    // 点击榜单,获取对应的数据
    refreshToplistData(type) {

        // 获取榜单数据
        alltopListData(parseInt(type), this.state.limit, this.state.offset).then((res) => {
            try {
                if (res.data.code === 200) {
                    this.setState({
                        songs: res.data.songs,
                        total: res.data.total,
                        updatedTime: res.data.updatedTime,
                        type: parseInt(type)
                    })
                }
            } catch (err) {
                console.log("错误为:" + err)
            }
        }).catch((error) => {
            console.log("错误为:", error);
        });

    }


    // 开始播放歌曲
    startPlaySong = (songId) => {


        getSongUrlData(songId).then((res) => {
            if (res.data.code === 200) {
                let arr = [];
                let storage = JSON.parse(localStorage.getItem("songUrlData"));
                if (!storage) {
                    arr.push(res.data.data[0])
                    localStorage.setItem('songUrlData', JSON.stringify(arr))
                } else {
                    storage.push(res.data.data[0])
                    localStorage.setItem("songUrlData", JSON.stringify(storage))
                }
                docCookies.setItem("playing", "PLAYING");
                this.forceUpdate();
            } else {
                message.info("请求数据失败")
            }
        });


        // 请求歌曲,歌手的播放信息
        getSongData(songId).then((res) => {
            if (res.data.code === 200) {
                let arr = [];
                let storage = JSON.parse(localStorage.getItem("songInfoData"));
                if (!storage) {
                    arr.push(res.data.songs[0])
                    localStorage.setItem('songInfoData', JSON.stringify(arr))
                    this.forceUpdate();
                } else {
                    storage.push(res.data.songs[0])
                    localStorage.setItem("songInfoData", JSON.stringify(storage))
                }
            } else {
                message.info("请求歌手歌曲数据失败,请重新尝试")
            }
        })

    };


    render() {

        const { songs, total, updatedTime, offset, limit, type } = this.state;

        let toplist = [
            {
                name: "热歌榜",
                type: 1,
                updateFrequency: "每天更新"
            },
            {
                name: "新歌榜",
                type: 2,
                updateFrequency: "每天更新"
            },
            {
                name: "原创歌曲榜",
                type: 3,
                updateFrequency: "每天更新"
            }
        ];

        const renderCloudToplist = toplist.map((item, index) => {
            return (
                <div className="bangItem">
                    <Link
                        style={{ color: 'black' }}
                        to={`/discover/toplist?type=${item.type}`}
                        onClick={() => this.refreshToplistData(item.type)
                    }>{item.name}</Link>
                </div>
            )
        })

        const listArray = ['热歌榜', '新歌榜', '原创音乐榜']

        return (
            <div>
                <div style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}>
                    <Header />
                </div>
                <div>
                    {/* <MusicPlay /> */}
                </div>

                <div style={{ marginTop: "10vh", minWidth: "1300px" }}>
                    <Row>

                        <Col span={4}>

                        </Col>
                        <Col span={16}>
                            <Row>
                                {/* //内容左侧 */}
                                <Col span={4}>
                                    <div style={{ marginTop: "40px", marginBottom: "20px"}}>
                                    <div style={{  }}>
                                        {
                                            renderCloudToplist
                                        }
                                    </div>
                            </div>
                                </Col>

                                {/* //内容右侧 */}
                                <Col span={20}>
                                    <div style={{ paddingLeft: "20px", paddingRight: "10px", paddingBottom: "150px" }}>
                                        <div style={{ marginTop: "30px" }}>
                                            <Row>
                                                <Col span={18}>
                                                    <div style={{ fontSize: "30px", color: "#000", marginTop: "10px" }} >
                                                        {listArray[type - 1]}
                                                    </div>
                                                    <div style={{ marginTop: "10px" }}>
                                                        <span style={{ fontSize: "12px", marginRight: "5px" }}>最近更新: </span>
                                                        <span>{updatedTime}</span>
                                                    </div>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <div>
                                                    <SongList songs={songs} total={total} startPlaySong={this.startPlaySong} />
                                                </div>
                                            </Row>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </div>

                <div>
                    <Footer />
                </div>
            </div>
        )
    }
}

export default DiscoverToplist
